<template>
    <div>
        <navtop title="个人资料" :fixed="true" />

        <div class="my-box">
            <div class="my-bg">
            </div>

            <div class="list-box">
                <van-cell title="头像">
                    <div class="avatar">
                        <img class="auto-img" :src="userInfo.userImg" alt="">
                        <van-uploader class="uploader-box" :after-read="uploadUserImg" />
                    </div>

                </van-cell>
                <van-cell title="用户id">
                    <div class="fr">{{ userInfo.userId }}</div>
                </van-cell>
                <van-cell title="手机号">
                    <div class="fr">{{ userInfo.phone }}</div>
                </van-cell>
                <van-cell title="昵称">
                    <div class="fr">
                        <!-- <input class="nickname" type="text" v-model="userInfo.nickName" /> -->
                        <input class="nickname" type="text" v-model="userInfo.nickName"
                            @change="modifyUserInfo('nickName', '/updateNickName')">
                    </div>
                </van-cell>

                <div class="desc-box">
                    <div class="desc-title">简介</div>
                    <div>
                        <textarea v-model="userInfo.desc" class="text-area" placeholder="这家伙很懒，什么都没有留下"
                            @change="modifyUserInfo('desc', '/updateDesc')">
                                                                        </textarea>

                        <!--  -->
                    </div>
                </div>

            </div>
        </div>

    </div>
</template>
<script setup lang="ts">
import navtop from "@/components/navtop.vue";

import request from '@/utils/request'

import { Toast } from "vant";
import { getfindAccountInfo, postUpdateAvatar } from "@/api/index";
// import { file } from "@babel/types";
let userInfo: any = ref<any>({
    userImg: ''
});


let maxSize: any = ref<number>(1 * 1024 * 1024);


//修改用户信息
let modifyUserInfo: (key: string, url: string) => void = (key: string, url: string): void => {
    request.post(url, { [key]: userInfo.value[key] }
    ).then((result: any): void => {
        Toast(result.data.msg);

    })
}


let uploadUserImg: (file: any) => void = (file: any): void => {
    let type: string = file.file.type.split('/')[1];
    // console.log(type)

    let imgTypes: Array<string> = ['png', 'gif', 'jpg', 'jpeg'];
    if (imgTypes.indexOf(type) === -1) {

        Toast('图片类型只支持' + imgTypes.join(','));

        return
    }
    if (file.file.size > maxSize.value) {
        Toast('上传文件大小不能超过' + maxSize.value / 1024 + 'KB');
        return;
    }
    let base64: string = file.content.replace(/data:image\/[A-Za-z]+;base64,/, '');
    // console.log(base64);
    let imgData = {
        imgTypes: type,
        serverBase64Img: base64
    }
    postUpdateAvatar(imgData).then((res) => {
        // console.log(res);
        if (res.data.code == 'H001') {
            userInfo.value.userImg = res.data.userImg;
        }

        Toast(res.data.msg)
    })
}


onMounted(() => {
    getfindAccountInfo().then((result: any): void => {
        if (result.data.code == 'B001') {
            userInfo.value = result.data.result[0];

        }

    })
})



</script>

<style lang="less" scoped>
.my-box {
    width: 100vw;

    .my-bg {
        width: 100vw;
        height: 160px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: #0c34ba;
        position: relative;
        z-index: -12;
    }

    .list-box {
        z-index: 22;
        margin: -30px 10px 0;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        background-color: rgb(255, 255, 255);
        overflow: hidden;
        padding: 10px;
    }

    .avatar {
        width: 40px;
        height: 40px;
        background-color: #f5f5f5;
        position: relative;
        overflow: hidden;
        border-radius: 50%;
        margin-left: auto;
    }

    .uploader-box {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }

    :deep(.van-cell) {
        padding: 0;
        line-height: 40px;
        padding-bottom: 10px;
    }

    .desc-title {
        line-height: 40px;
        color: #323233;
        font-size: 14px;
    }

    .text-area {
        display: block;
        width: 100%;
        padding: 0;
        border: none;
        outline: none;
        resize: none;
        color: #969799;
        font-size: 14px;
    }

    .auto-img {
        width: 100%;
    }

    .nickname {
        display: block;
        width: 100%;
        padding: 0;
        border: none;
        outline: none;
        color: #969799;
        font-size: 14px;
        text-align: right;
    }



    // .bg-cover {}
}
</style>